<template>
  <div id="J_swiper" class="swiper">
    <div class="swiper-wrapper">
      <div class="swiperItem swiper-slide">
        <User
          :is-play-animation="currentSwiperIndex === 0"
          @travel-info-inited="travelInfoInited"
        />
      </div>
      <div v-if="!isNewUser" class="swiperItem swiper-slide">
        <Signin
          :signin="signin"
          :is-signin-play-animation="currentSwiperIndex === 1"
        />
      </div>
      <div v-if="!isNewUser && isShowImtimacy" class="swiperItem swiper-slide">
        <Imtimacy
          :is-imtimacy-play-animation="currentSwiperIndex === 2"
          :accompanylist="travelInfo.accompanyinfo"
          :intimacy-info="travelInfo.userintimacyinfo"
        />
      </div>
      <div v-if="!isNewUser" class="swiperItem swiper-slide">
        <Keywords
          :keywordslist="keywordslist"
          @key-word-showed="handleKeyWordShow"
        />
      </div>
      <div class="swiperItem swiper-slide">
        <Gift :travel-info="travelInfo" @replay="doReplay" @gift-received="travelInfo.is_first_take = false" />
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
//import 'swiper/css';
// import  from './Home.vue'
import User from './User.vue'
import Signin from './Signin.vue'
import Imtimacy from './Imtimacy.vue'
import Keywords from './Keywords.vue'
import Gift from './Gift.vue'
let swiper = {}
let isKeyWordShowEd = false
export default {
  components: { User, Signin, Imtimacy, Keywords, Gift },
  data () {
    return {
      swiper: null,
      userkeywords: [],
      signin: {},
      travelInfo: {},
      currentSwiperIndex: 0,
      isNewUser: false,
      isShowImtimacy: true
    }
  },
  mounted () {
    swiper = new Swiper('#J_swiper', {
      direction: 'vertical'
    })
    const self = this
    swiper.on('slideChange', function () {
      //if(isShowImtimacy)
      let keyWordPageIndex = 3
      if(!self.isShowImtimacy){
        keyWordPageIndex = 2
      }
      if (swiper.realIndex === keyWordPageIndex && !isKeyWordShowEd) {
        swiper.allowSlideNext = false
      } else {
        swiper.allowSlideNext = true
      }
      self.currentSwiperIndex = swiper.realIndex
    })
    swiper.updateSlides()
  },
  methods: {
    travelInfoInited (travelInfo) {
      const { userkeywords, signin_info: signin, is_new_user, accompanyinfo, userintimacyinfo } = travelInfo
      if (userkeywords) {
        const { key_words: keywordslist, hey_id:keyId, nick_name:nickName } = userkeywords
        this.keywordslist = [keyId, nickName].concat(keywordslist)
      }
      this.signin = signin || {}
      this.travelInfo = travelInfo
      this.isNewUser = is_new_user

      if(accompanyinfo.length === 0 && userintimacyinfo.bear === 0){
        this.isShowImtimacy = false
      }

      this.$nextTick(() => {
        swiper.updateSlides()
      })
    },

    doReplay () {
      swiper.slideTo(0, 1500)
    },

    handleKeyWordShow () {
      swiper.allowSlideNext = true
      isKeyWordShowEd = true
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper {
  height: 100%;
  overflow: hidden;
}
.swiper-wrapper {
  width: 100%;
  height: 100%;
  transition-property: transform;
  .swiperItem {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
}
</style>
